<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <center>
    <canvas id="canvas" width="300" height="300" style="background-color: aqua;">浏览器不支持！</canvas>
    <script>
        //得到画布的dom对象
        var canvas=document.getElementById("canvas");
        // alert(canvas);
        //设置绘图环境
        var ct=canvas.getContext("2d");
        // alert(ct);
        //画一条线段
        ct.beginPath();
        ct.lineWidth=10;//线条宽度
        ct.strokeStyle="red";
        ct.moveTo(50,50);//设置笔触位置
        ct.lineTo(200,50);//设置移动的方式
        ct.stroke();//划线
        ct.closePath();//结束画线
        //画一个空心圆
        //开始画线
        ct.beginPath();
        ct.lineWidth=2;
        ct.strokeStyle="#FF00FF";
        ct.arc(200,200,50,0,360,false);//圆弧
        ct.stroke();//画线
        ct.closePath();

        //画一个实心圆
        ct.beginPath();
        ct.strokeStyle="blue";
        ct.fillStyle="yellow";
        ct.arc(100,120,50,0,360,false);
        ct.fill();
        ct.stroke();
        ct.closePath();
    </script>
    </center>
</body>
</html>